<template>
    <div class="retrieve-password">
        <div class="p-box">
            <p class="p1">找回密码！</p>
            <p class="p2">Find password</p>
        </div>

        <van-form @submit="postCheckValidCode">
            <van-field
                v-model="email"
                name="邮箱"
                label="邮箱"
                placeholder="邮箱"
                autocomplete="off"
                :rules="[
                    {
                        required: true,
                        message: '请填写正确的邮箱',
                        pattern: emailReg,
                    },
                ]"
            />
            <van-field
                v-model="verification"
                center
                clearable
                autocomplete="off"
                label="验证码"
                placeholder="验证码(6个字符)"
                :rules="[
                    {
                        required: true,
                        message: '请填写正确的验证码',
                        pattern: verificationReg,
                    },
                ]"
            >
                <template #button>
                    <van-button
                        size="small"
                        type="button"
                        color="#5766dd"
                        @click="postEmailValidCode"
                        :disabled="disabled"
                        >{{ text }}</van-button
                    >
                </template>
            </van-field>

            <div class="forget-box">
                <div class="forget" @click="goLogon">已有账号，立刻登录</div>
            </div>

            <div>
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    color="#0c34ba"
                    >下一步</van-button
                >
            </div>
        </van-form>
    </div>
</template>



<script>
import { Toast } from 'vant';
export default {
    name: "Retrievepassword",
    data() {
        return {
            // 输入邮箱
            email: "",
            // 输入的验证码
            verification: "",

            // 邮箱正则
            emailReg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            // 验证码正则
            verificationReg: /^\d{6}$/,

            //  发送验证码定时器
            timer: null,
            // 验证码开关
            disabled: false,
            verificationText: "发送验证码",
        };
    },
    methods: {
        // 跳转到 登录路由
        goLogon() {
            this.$router.push({ name: "Logon" });
        },

        // 获取验证码
        postEmailValidCode() {
            // 判断邮箱
            if (!this.emailReg.test(this.email)) {
                Toast.fail('请填写正确的邮箱');
                return
            }

            // 禁止按钮
            this.disabled = true;
            // 请求 发送验证码
            this.axios({
                method: "POST",
                url: "/emailValidCode",
                data: {
                    email: this.email
                }
            }).then((result) => {
                

                // 验证码发送成功
                if (result.data.code === "J001") {
                    Toast.success('发送成功，注意查收');

                    // 计算器控制按钮
                    let mm = 60;
                    this.timer = setInterval(() => {
                        if (mm === -1) {
                            this.disabled = false;
                            clearInterval(this.timer);
                        }
                        //  修改按钮文本
                        this.verificationText = `${mm}秒后才可发送`;
                        mm--
                    }, 1000);
                }
                else {
                    this.disabled = false;
                }
            }).catch((err) => {
                
                this.disabled = false;
            });
        },

        // 验证验证码
        postCheckValidCode() {
            this.axios({
                method: "POST",
                url: "/checkValidCode",
                data: {
                    validCode: this.verification
                }
            }).then((result) => {
                

                if (result.data.code === "K001") {
                    Toast.success("验证成功");
                    // 跳转到 修改密码路由
                    setTimeout(() => {
                        this.$router.push({ name: "Modifypassword" });
                    }, 1500)
                } else {
                    Toast.fail(result.data.msg);
                }

            }).catch((err) => {
                
            });
        }
    },
    computed: {
        // 调整按钮文本
        text() {
            if (!this.disabled) {
                this.verificationText = "发送验证码";
            }
            return this.verificationText
        }
    }
};
</script>

<style lang="less" scoped>
.retrieve-password {
    .p-box {
        margin-top: 100px;
        padding-left: 15px;
        margin-bottom: 50px;

        .p1 {
            font-size: 28px;
            font-weight: 600;
            color: #646566;
        }

        .p2 {
            color: #666;
            margin-top: 36px;
            font-size: 16px;
        }
    }

    /deep/ .van-form {
        padding: 0 15px;

        .forget-box {
            display: flex;
            margin-top: 26px;
            margin-bottom: 54px;
            color: #e99036;
            font-size: 14px;
            .forget {
                margin-left: auto;
            }
        }
    }
}
</style>